<!--
 * @Author: linzaifei 1609781601@qq.com
 * @Date: 2025-05-26 09:16:44
 * @LastEditors: linzaifei 1609781601@qq.com
 * @LastEditTime: 2025-08-15 14:19:04
 * @FilePath: /vue3-cesium-plus/src/components/control/vc-search.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div class="vc-street-control" :style="positionStyle" >
        <vc-layer-imagery v-if="open">
          <vc-imagery-provider-urltemplate :projection-transforms="{
             from: 'WGS84',
             to: 'GCJ02'
          }"  url="http://baidubiaozhu.gggis.com/{z}/{x}/{y}.png"></vc-imagery-provider-urltemplate>
        </vc-layer-imagery>
        <vc-layer-imagery v-if="open">
            <vc-imagery-provider-urltemplate  url="http://2.gggis.com/maps/vt?pb=!1m5!1m4!1i{z}!2i{x}!3i{y}!4i256!2m8!1e2!2ssvv!4m2!1scb_client!2sapiv3!4m2!1scc!2s*211m3*211e3*212b1*213e2*211m3*211e2*212b1*213e2!3m3!3sUS!12m1!1e68!4e0"></vc-imagery-provider-urltemplate>
        </vc-layer-imagery>
      <div class="vc-button " @click="onClickItem" :class="[open ? 'isActive' : '']" >
            <img v-if="open" src="@/assets/images/home/ic_home_street_w.png" class="image" />
            <img v-else src="@/assets/images/home/ic_home_street.png" class="image" />
            <span>街景</span>
      </div>
    </div>
  </template>
  
<script setup lang="ts">
import { ref,onMounted } from 'vue'
import VcWebUrlDialog from '../vc-dialog/vc-web-url-dialog.vue'
import {createComponent} from '@/components/createComponent'
import { useCustomCesium } from "../useCustomCesium";
const {vueCesium} = useCustomCesium();
import { positionProps, usePosition } from '../composables/usePosition'
const props = defineProps({
    ...positionProps,
})
const { positionStyle } = usePosition(props)
import { useCesiumClick } from "./useCesiumClick";
const {addClickListener, removeClickListener} = useCesiumClick()
onMounted(()=>{
})

const open = ref(false)
const onClickItem = ()=>{
  open.value = !open.value

  if(open.value){
    addClickListener(vueCesium.viewer,(data)=>{
      console.log("-----VcWebUrlDialog--",data)
      const { close } = createComponent(VcWebUrlDialog, {
        name: "街景",
        url: `https://street.giiiis.com/index.html?lat=${data.latitude}&lng=${data.longitude}&v=1.0`,
        onTap: () => {
          close();
        },
      });
      
    })
  }else{
    removeClickListener();
  }
}




</script>
  
<style scoped lang="scss">
  .vc-street-control{
    position: absolute;
    z-index: 100;
    .vc-button{
      img{
        width: 16px;
        height: 16px;
      }
    }
  }
</style>